import React, { useEffect } from 'react';
import { Input, Divider, Button, Image, Space } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import { AppstoreOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import ItemList from '@/pages/collection/MyCollection/components/ItemList';
import CreateItem from '@/pages/collection/MyCollection/components/CreateItem';
import { connect, history } from 'umi';

const Collection = (props) => {
  const {
    dispatch,
    match: {
      params: { collectionID },
    },
    collection,
    status,
    collectionLoading,
    currentUser,
  } = props;

  useEffect(() => {
    if (collectionLoading) {
      return;
    }

    dispatch({
      type: 'myCollection/getCollection',
      payload: { collectionID },
    });
  }, [status]);

  const handleFormSubmit = (value) => {
    dispatch({
      type: 'myCollection/getCollection',
      payload: {
        collectionID,
        name: value,
      },
    });
  };

  return (
    <PageContainer
      header={{
        backIcon: <ArrowLeftOutlined />,
        onBack: () => history.goBack(),
        title: collection.name,
        breadcrumb: {},
        extra: [<Button key="2">编辑</Button>, <Button key="1">查看</Button>],
      }}
      // content={
      //   <Image
      //   height={200}
      //   width='100%'
      //   alt='logo'
      //   preview={false}
      //   src={`/api/getLogo/?fileHash=${collection.logo}`}
      //   fallback=""fallback=""
      //   />
      // }
    >
      <ProCard>
        <Space>
          <Input.Search
            placeholder="请输入"
            enterButton="搜索"
            size="large"
            onSearch={handleFormSubmit}
          />
          <CreateItem />
        </Space>
      </ProCard>
      <ProCard style={{ marginTop: '15px' }}>
        <ItemList itemList={collection.items} />
      </ProCard>
    </PageContainer>
  );
};

export default connect(({ myCollection, user, loading }) => ({
  status: myCollection.status,
  collection: myCollection.collection,
  currentUser: user.currentUser,
  collectionLoading: loading.effects['myCollection/getCollection'],
}))(Collection);
